<?php
header('content-type:text/html;charset=utf8');
require_once "../config.php";
require_once "../functions.php";

checkLogin();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Add new post &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
</head>
<body>

  <div class="main">
    <?php
      $current_page = "post-add";
    ?>
    <?php include_once "./public/_navbar.php" ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>写文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="row" id="data-form">
        <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">标题</label>
            <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容"></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            <img class="help-block thumbnail" style="display: none">
            <input id="feature" class="form-control" name="feature" type="file">
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category">
              <option value="1">未分类</option>
              <option value="2">潮生活</option>
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
              <option value="drafted">草稿</option>
              <option value="published">已发布</option>
            </select>
          </div>
          <div class="form-group">
            <button id="btn-save" class="btn btn-primary" type="button">保存</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <?php include_once "./public/_aside.php"; ?>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="../static/assets/vendors/ckeditor/ckeditor.js"></script>
  <script>
  $(function(){
    //实现文件上传的功能
    $('#feature').on('change',function(){
      //文件上传一般不用点击事件，用change事件
      // console.dir(this);
      var file = this.files[0];
      var data = new FormData();
      data.append('file',file);
      $.ajax({
        type: "post",
        url: "api/_uploadFile.php",
        data: data,
        dataType: "json",
        contentType:false,//只有设置了这个参数，jquery才会把文件带回服务端
        processData:false,//告诉jq不要序列化我们的参数
        success: function (res) {
          // console.log(res);
          if(res.code == 1){
            $('.help-block').attr("src",res.src).show();
          }
        }
      });
    })

    //富文本编辑器的使用
    //1. 引入ckeditor
    //2. 放一个textarea
    //3.调用插件提供的方法，初始化富文本编辑器
    CKEDITOR.replace('content')

    //提交保存
    $('#btn-save').on('click',function(){
      //收集表单数据，发送到服务端
      // console.log(CKEDITOR.instances)
      CKEDITOR.instances.content.updateElement();
      var data = $('#data-form').serialize();
      // console.log(data);
      //发送到服务器端
      $.ajax({
        type: "post",
        url: "api/_addPost.php",
        data: data,
        dataType: "json",
        success: function (res) {
          console.log(res);
        }
      });
    })
  })
  </script>
</body>
</html>
